<template>
  <view class="container">
    <!-- 显示地图 -->
    <view class="map-container">
      <map
        id="map"
        :longitude="mapCenter.longitude"
        :latitude="mapCenter.latitude"
        :scale="scale"
        :markers="markers"
        style="width: 100%; height: 100%;">
      </map>
    </view>

    <!-- 表单内容 -->
    <view :class="['form', { 'form-popup-active': showFormPopup }]">
      <!-- 选择出发地点 -->
      <view class="form-item" @click="selectLocation('start')">
        <text class="form-label">出发地点</text>
        <text class="form-value">{{ startLocation || '请选择出发地点' }}</text>
      </view>

      <!-- 选择到达地点 -->
      <view class="form-item" @click="selectLocation('end')">
        <text class="form-label">到达地点</text>
        <text class="form-value">{{ endLocation || '请选择到达地点' }}</text>
      </view>

      <!-- 选择出发时间 -->
      <view class="form-item" @click="showDatePicker('departureTime')">
        <text class="form-label">出发时间</text>
        <text class="form-value">{{ departureTime || '请选择出发时间' }}</text>
      </view>

      <!-- 选择到达时间 -->
      <view class="form-item" @click="showDatePicker('arrivalTime')">
        <text class="form-label">到达时间</text>
        <text class="form-value">{{ arrivalTime || '请选择到达时间' }}</text>
      </view>

      <!-- 选择活动人数 -->
      <view class="form-item">
        <text class="form-label">活动人数</text>
        <picker mode="selector" :range="passengerOptions" @change="selectPassengers">
          <text class="form-value">{{ passengerCount }} 人</text>
        </picker>
      </view>

      <!-- 提交按钮 -->
      <button class="submit-button" @click="submitForm">确认</button>
    </view>

    <!-- 日期时间选择器 -->
    <mx-date-picker
      :show="showPicker"
      :type="'datetime'"
      :value="pickerValue"
	  :min-date="minDate"
      @confirm="onDateSelected"
      @cancel="hideDatePicker"
    />
  </view>
</template>

<script>
import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
import { PinlistAPI,getUserInfo } from '../../services/api';

export default {
  components: {
    MxDatePicker,
  },
  data() {
    return {
      scale: 15, // 初始比例尺
      startLocation: '', // 出发地点
      endLocation: '', // 到达地点
      departureTime: '', // 出发时间
      arrivalTime: '', // 到达时间
      passengerCount: 1, // 活动人数
      passengerOptions: [1, 2, 3, 4, 5, 6], // 人数选项

      // 地图相关数据
      mapCenter: { longitude: 116.404, latitude: 39.915 }, // 默认地图中心（北京）
      markers: [], // 地图标记数组
      firstLocationFetched: false, // 标记是否已经获取过位置

      // 日期选择器相关
      showPicker: false,
      pickerValue: '',
      selectedField: '', // 标记选择的是出发时间还是到达时间
      showFormPopup: false, // 是否显示表单弹窗
    };
  },
  mounted() {
    // 获取用户当前的GPS定位
    this.getUserLocation();
	// 自动弹出表单
	this.showFormPopup = true;
  },
  methods: {
    // 获取用户当前位置
    getUserLocation() {
      // 只在第一次获取位置时更新地图中心
      if (this.firstLocationFetched) return;

      uni.getLocation({
        type: 'wgs84', // 默认为 'wgs84'，表示国际标准GPS坐标
        success: (res) => {
          const { latitude, longitude } = res;

          // 获取屏幕高度并计算偏移量
          uni.getSystemInfo({
            success: (info) => {
              const screenHeight = info.screenHeight; // 屏幕高度
              const offset = - screenHeight / 4; // 偏移量为屏幕的 1/4

              // 将用户当前位置作为地图中心，并进行偏移
              this.mapCenter = {
                latitude: latitude + (offset / 50000), // 根据屏幕高度进行微小偏移
                longitude: longitude,
              };
              this.markers = [{ 
                id: 'user',
                latitude,
                longitude,
                iconPath: '/static/user-location-icon.png', // 用户位置标记图标
                width: 30,
                height: 30,
              }];
              this.firstLocationFetched = true; // 标记为已获取位置
            },
            fail: (err) => {
              console.error("获取设备信息失败：", err);
            }
          });
        },
        fail: (err) => {
          console.error("获取位置失败：", err);
          uni.showToast({
            title: "获取当前位置失败",
            icon: "none",
          });
        }
      });
    },

    // 选择地点
    selectLocation(type) {
      uni.chooseLocation({
        success: (res) => {
          if (type === "start") {
            this.startLocation = res.name || res.address;
            this.updateMap('start', res.longitude, res.latitude); // 更新地图标记
          } else {
            this.endLocation = res.name || res.address;
            this.updateMap('end', res.longitude, res.latitude); // 更新地图标记
          }
        },
        fail: (err) => {
          console.error("选择地点失败：", err);
        },
      });
    },

    // 更新地图标记
    updateMap(type, longitude, latitude) {
      let newMarkers = [...this.markers]; // 创建新的markers数组
    
      if (type === 'start') {
        newMarkers = newMarkers.filter(marker => marker.id !== 'start'); // 移除旧的起点标记
        newMarkers.push({
          id: 'start',
          latitude: latitude,
          longitude: longitude,
          iconPath: '/static/start-icon.png', // 起点标记图标
          width: 30,
          height: 30,
        });
      } else {
        newMarkers = newMarkers.filter(marker => marker.id !== 'end'); // 移除旧的终点标记
        newMarkers.push({
          id: 'end',
          latitude: latitude,
          longitude: longitude,
          iconPath: '/static/end-icon.png', // 终点标记图标
          width: 30,
          height: 30,
        });
      }
    
      this.markers = newMarkers; // 更新标记
    
      // 如果两个地点都已选择，调用 includePoints
      if (this.startLocation && this.endLocation) {
        const points = newMarkers.map(marker => ({
          longitude: marker.longitude,
          latitude: marker.latitude,
        }));
    
        // 使用 includePoints 自然缩放地图
        const mapCtx = uni.createMapContext('map'); // 创建地图上下文
        mapCtx.includePoints({
          points,
          padding: [25, 50, 400, 50], // 设置地图边距
        });
      }
    },

    // 显示日期选择器
    showDatePicker(field) {
      this.selectedField = field; // 标记选择的字段
      this.pickerValue = this[field]; // 当前值作为初始值
	  
      this.showPicker = true;
    },

    // 隐藏日期选择器
    hideDatePicker() {
      this.showPicker = false;
    },

    // 日期选择器确认
    onDateSelected(e) {
      this.showPicker = false;
      if (this.selectedField === "departureTime") {
        this.departureTime = e.value;
      } else if (this.selectedField === "arrivalTime") {
        this.arrivalTime = e.value;
      }
    },

    // 选择活动人数
    selectPassengers(e) {
      this.passengerCount = Number(this.passengerOptions[e.detail.value]);
    },

    // 提交表单
    async submitForm() {
      if (!this.startLocation || !this.endLocation || !this.departureTime || !this.arrivalTime) {
        uni.showToast({
          title: "请填写完整信息",
          icon: "none",
        });
        return;
      }
	  const userinfo=await getUserInfo();
	  const userID=userinfo.userID;
      if (!userID) {
        uni.showToast({
          title: "用户信息获取失败",
          icon: "none",
        });
        return;
      }
		
      // 创建活动单数据
      const pinData = {
        leader: userID, // 领队用户ID
        members: JSON.stringify([]), // 成员用户ID列表，这里为空数组（暂时）
        startPoint: this.startLocation,
        endPoint: this.endLocation,
        departureTime: this.departureTime,
        arrivalTime: this.arrivalTime,
		joinedPassengers: 0, // 已拼乘客数量，默认0
		totalPassengers: this.passengerCount, // 总共需拼的乘客数量
      };

      try {
        // 调用API创建活动单
		console.log(pinData);
        await PinlistAPI.createPin(pinData);

		console.log("success");
        uni.showToast({
          title: "提交成功",
          icon: "success",
        });
		// 隐藏表单
		this.showFormPopup = false;
		
		// 延迟返回，等待动画完成
		    setTimeout(() => {
		      uni.navigateBack();
		    }, 1000); // 600 毫秒与动画时长一致
        // // 通过 uni.$emit 发送事件，通知父页面更新模块
        // const newModule = {
        //   startTime: this.departureTime,
        //   endTime: this.arrivalTime,
        //   startPoint: this.startLocation,
        //   endPoint: this.endLocation,
        //   joinedPassengers: 0, // 已拼乘客数量，默认0
        //   totalPassengers: this.passengerCount, // 总共需拼的乘客数量
        // };
        uni.$emit('updateModule');

        // console.log("提交数据：", {
        //   出发地点: this.startLocation,
        //   到达地点: this.endLocation,
        //   出发时间: this.departureTime,
        //   到达时间: this.arrivalTime,
        //   活动人数: this.passengerCount,
        // });



      } catch (error) {
        console.error("创建活动单失败：", error);
        uni.showToast({
          title: "提交失败，请稍后再试",
          icon: "none",
        });
      }
    },
  },
};
</script>


<style scoped>
.container {
  padding: 0;
  background-color: #f8f9fa;
  min-height: 100vh;
}

.map-container {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.form {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: white;
  border-top-left-radius: 32px;  /* 增加圆角弧度 */
  border-top-right-radius: 32px; /* 增加圆角弧度 */
  padding: 16px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  transform: translateY(100%);
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.form-popup-active {
  transform: translateY(0);
}

.form-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;  /* 增加行的高度 */
  border-bottom: 1px solid #eee;
}

.form-item:last-child {
  border-bottom: none;
}

.form-label {
  font-size: 16px;
  color: #333;
}

.form-value {
  font-size: 16px;
  color: #888;
}

.submit-button {
  width: 100%;
  background-color: #000000;  /* 黑色背景 */
  color: white;               /* 白色文字 */
  padding: 10px;              /* 减小按钮高度 */
  border: none;
  border-radius: 32px;
  font-size: 16px;
  margin-top: 20px;
  cursor: pointer;
}

.submit-button:active {
  background-color: #ffffff;  /* 点击时白色背景 */
  color: black;               /* 点击时黑色文字 */
}
</style>